<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="${pageContext.request.contextPath}/3rd/jquery/jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
		var arr = [
			[0,0,0,0,0,0,0,0,0,0,0,0,0],
			[0,0,0,0,0,0,0,0,0,0,0,0,0],
			[3,3,0,0,0,0,0,0,0,0,0,3,3],
			[3,3,0,0,0,0,0,0,0,0,0,3,3],
			[0,0,0,0,0,0,0,0,0,0,0,0,0],
			[0,0,0,0,0,0,0,0,0,0,0,0,0],
			[0,0,0,0,0,0,0,0,0,0,0,0,0],
		];
		$(
				function(){
					var list = eval('${list}');
					for(var i = 0; i < list.length; i++){
						arr[list[i].seatNumber.split("-")[0]][list[i].seatNumber.split("-")[1]] = 2;
					}
					
					var $table = $("#table_1");
					for(var i = 0; i < arr.length; i++){
						var $tr = $("<tr></tr>");
						for(var j = 0; j < arr[i].length; j++){
							if(arr[i][j] == 1){
								var $td = $("<td><span id='p3'><img src='${pageContext.request.contextPath}/static/img/1.png'></span></td>");
								$tr.append($td);
							}else if(arr[i][j]==0){
								var $td = $("<td><span id='p1'><img src='${pageContext.request.contextPath}/static/img/0.png'></span></td>");
								$tr.append($td);
							}else if(arr[i][j]==2){
								var $td = $("<td><span id='p2'><img src='${pageContext.request.contextPath}/static/img/2.png'></span></td>");
								$tr.append($td);
							}else if(arr[i][j]==3){
								var $td = $("<td><span></span></td>");
								$tr.append($td);
							}
						}
						$table.append($tr);
					}
				}
			);
		</script>
		<style type="text/css">
		</style>
	</head>

	<body>
		<table align="center" id="table_1">
		</table>
		<center><input type="button" id="button_1" value="选好了"></center>
		<script type="text/javascript">
			
			$(
				function(){
					$("span").click(
						function(){
							if($(this).attr("id") == "p1"){
								$(this).html("");
								var $img = $("<img src='${pageContext.request.contextPath}/static/img/1.png'>");
								$(this).append($img);
								$(this).attr("id","p3");
							}else if($(this).attr("id") == "p3"){
								$(this).html("");
								var $img = $("<img src='${pageContext.request.contextPath}/static/img/0.png'>");
								$(this).append($img);
								$(this).attr("id","p1");
							} 
						}
					);
				}
			);
				
			$(":button").click(
				function(){
					var seatArr = [], num = 0;
					for(var i = 0; i < arr.length; i++)
						for(var j = 0; j< arr[i].length; j++)
							if($($("span")[i * arr[i].length + j]).attr("id") == "p3"){
								seatArr[num++] = i + "-" + j;
							}
					//跳转
					window.location.href = "${pageContext.request.contextPath}/cinema?action=seatSubmit&seatArr=" + seatArr;
				}		
			);
		</script>
	</body>

</html>